<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝焦点图</title>
    <style type="text/css">
        * {  margin: 0;  padding: 0;  border: 0;  list-style: none;  }
        .all {  width: 490px;  height: 170px;  margin: 100px auto;  padding: 10px;  border: 1px solid #ccc; position: relative; }
        .all .show{  z-index:1; width: 490px;  height: 170px; overflow: hidden;position: relative; }
        .all ul{width: 999999px; position: absolute;}
        .all ul li{ float: left; }
        .all ul img{ cursor: pointer;}
        .all ol{ position: absolute;z-index: 2;bottom: 20px;right: 20px;}
        .all ol li{  float: left;  background: #fff;  width: 20px;  height: 20px;  margin-left: 10px;  border: 1px solid #ccc;  text-align: center;cursor: pointer;  }
        .all .cur{background: yellow;}
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            var timer = null;
            var index = 0;
            addTime();

            // 图片移上移下
            $('.all').hover(function(){
                clearInterval(timer);
            },function(){
                addTime();
            });

            // 索引值移上效果
            $('.all ol li').mouseover(function(){
                index = $(this).index();
                $(this).addClass("cur").siblings().removeClass("cur");
                $('.show ul').stop().animate({left:-index*490});
            })

            // 计时器
            function addTime(){
                timer = setInterval(function(){
                    index++;
                    if(index>4){
                        index = 0;
                    }
                    $('.all ol li').eq(index).addClass("cur").siblings().removeClass("cur");
                    $('.show ul').stop().animate({left:-index*490});
                },1000);
            }
        });
    </script>
</head>
<body>
<div class="all">
    <div class="show">
        <ul>
            <li><img src="images/taobao/01.jpg" alt="" width="490" height="170"></li>
            <li><img src="images/taobao/02.jpg" alt="" width="490" height="170"></li>
            <li><img src="images/taobao/03.jpg" alt="" width="490" height="170"></li>
            <li><img src="images/taobao/04.jpg" alt="" width="490" height="170"></li>
            <li><img src="images/taobao/05.jpg" alt="" width="490" height="170"></li>
        </ul>
    </div>
    <ol>
        <li class="cur">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>